import React from "react";
import ReactDOM from "react-dom";

// 组件的生命周期
// 卸载时期

class App extends React.Component{
    // 最先执行,类似构造函数,可用于做初始化
    constructor(props){
        super(props)

        this.state = {
            count: 0
        }
    }

    handleClick = () => {
        this.setState({ // 导致组件更新
            count: this.state.count + 1
        })
    }

    // 渲染ui
    render () {
        // console.warn('生命周期钩子函数: render')
        return (
            <div>
                {
                    this.state.count > 3
                        ? <p>豆豆被打死了</p>
                        : <Counter count={this.state.count} />
                }
                <button onClick={this.handleClick}>大大大</button>
            </div>
        )
    }
}

class Counter extends React.Component{
    componentDidMount() {
        // 开启定时器
        this.timerId = setInterval(() => {
            console.log("定时器正在执行")
        }, 500)
    }

    render() {
        console.warn('子组件,生命周期钩子函数: render')
        return (
            <h1 id='title'>统计打豆豆的次数:{this.props.count}</h1>
        )
    }

    // 组件从页面消失的时候就执行,卸载
    componentWillUnmount(){
        console.warn('子组件,生命周期消失钩子函数: componentWillUnmount')
        // 清理定时器
        clearInterval(this.timerId)
    }
}

ReactDOM.render(<App />, document.getElementById('root'))